<template>
	<view>
		
		
		<!-- 格子广告 -->
		<view class="grid_left">
			<ad-custom :unit-id="xcx_ad.GridLeftId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view class="grid_right" :style="{left: (_windowWidth-70)+'px'}">
			<ad-custom :unit-id="xcx_ad.GridRightId" 
			bindload="adLoad" binderror="adError" bindclose="adClose"></ad-custom>
		</view>
		
		<view class="w100 flex flex_jc" style="position: fixed;top: 0;z-index: 9999;">
			<ad :unit-id="xcx_ad.video" ad-type="video" ad-theme="white"></ad>
		</view>
		<u-popup :round="10" mode="center" :show="show_tips" @close="closeTips" >
			<view class="tips">
				
				<view class="tli flex flex_ac" v-if="check_music.jname">
					<view class="label fz30">原版</view>
					<view class="value ml20">{{check_music.jname}}</view>
				</view>
				
				<view class="tli flex flex_ac" v-if="check_music.cname">
					<view class="label fz30">中文</view>
					<view class="value ml20">{{check_music.cname}}</view>
				</view>
				
				<view class="tli flex flex_ac" v-if="check_music.yname">
					<view class="label fz30">粤语</view>
					<view class="value ml20">{{check_music.yname}}</view>
				</view>
				
				<view class="tli flex flex_ac" v-if="check_music.singer">
					<view class="label fz30">歌手</view>
					<view class="value ml20">{{check_music.singer}}</view>
				</view>
				
				<view class="tli flex flex_ac" v-if="check_music.lyrics">
					<view class="label fz30">日作词</view>
					<view class="value ml20">{{check_music.lyrics}}</view>
				</view>
			
				<view class="tli flex flex_ac" v-if="check_music.composer">
					<view class="label fz30">作曲</view>
					<view class="value ml20">{{check_music.composer}}</view>
				</view>
				
				<view class="tli flex flex_ac" v-if="check_music.arrangement">
					<view class="label fz30">编曲</view>
					<view class="value ml20">{{check_music.arrangement}}</view>
				</view>
				
				
				<view class="btn-box flex w100">
					<view v-if="check_music.jname" class="btn w100" @click="copyName(check_music.jname)">复制原版歌名</view>
					<view v-if="check_music.cname" class="btn w100" @click="copyName(check_music.cname)">复制中文歌名</view>
					<view v-if="check_music.yname" class="btn w100" @click="copyName(check_music.yname)">复制粤语歌名</view>
				</view>
			</view>
		</u-popup>
		
		<view class="w100 flex flex_jc flex_wrap" :class="show_ad?'mt580':''">
			<view class="w710 h100 mt30 li flex flex_ac" @click="openTips(item)" v-for="(item,index) in music_list">
				<view class="img ml20">
					<u--image :showLoading="true" :src="item.cover?item.cover:'/static/images/music.jpg'" width="100%" height="100%"></u--image>
				</view>
				<view class="detail ml20 flex flex_ac flex_wrap">
					<view class="name w100 fz40 hidden2">{{item.name}}</view>
					<view class="zuoqu w100 fz30 col_999">{{item.jname}}</view>
				</view>
				<!-- <image class="tag" src="/static/images/index.png"></image> -->
			</view>
		</view>
	</view>
	
</template>

<script>
	import adSdk from "@/utils/advertise.js"	
	import {getMusicList} from "@/api/api"
	export default {
		data() {
			return {
				page:1,
				music_list:[],
				music_count:0,
				tips:'数据加载中',
				show_tips:false,
				name:'',
				check_music:[],
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
				_windowWidth:getApp().globalData._windowWidth,
				_windowHeight:getApp().globalData._windowHeight,
			}
		},
		
		
		onLoad: function (option) {
			this.getMusicList()
		},
		
		onShow:function(){
			adSdk.initInterstitial(this.xcx_ad.interstitialId)
			adSdk.showInterstitial()
			
		},
		
		onReachBottom(){
			
			if(this.music_list.length>=this.music_count){
				this.tips = '所有数据加载完成'
			}else{
				this.page += 1
				this.getMusicList()
			}
		
		},
	
		methods:{
			
			openTips(info) {
				this.check_music = info
				this.show_tips = true
				console.log(this.check_music)
			},
			
			
			closeTips() {
			  this.show_tips = false
			},
			
			
			getMusicList(){
				getMusicList(this.page).then(res=>{
					console.log(res)
					this.music_count = res.data.total
					var data = res.data.data
					for(var i = 0 ;i<data.length;i++){
						this.music_list.push(data[i])
					}
					if(this.music_list.length>=this.music_count){
						this.tips = '所有数据加载完成'
					}
				})
			},
			
			copyName(name){
				console.log('copy')
				uni.setClipboardData({
					data:name,
					success:function(){
						uni.showToast({
							title: "歌名已复制", // 提示的内容
							icon: "none", // 图标，默认success
							image: "", // 自定义图标的本地路径，image 的优先级高于 icon
							duration: 2000, // 提示的延迟时间，默认1500
							mask: false, // 是否显示透明蒙层，防止触摸穿透
						})
					}
				})
			},
		
		}
	}
</script>
<style>
	.img .u-transition{width: 100%;height: 100%;}
</style>
<style scoped>
	.btn-box{border-top: 1px solid #eaeaea;margin-top: 20rpx;}
	.btn-box .btn:last-child{border-right: none;}
	.btn-box .btn{height: 60rpx;background-color: #FFFFFF;border-right: 1px solid #eaeaea;text-align: center;line-height: 60rpx;font-size: 30rpx;color: #1edada;}
	.tli .value{width: 480rpx;font-size: 35rpx;}
	.tli .label{width: 100rpx;height: 50rpx;border-radius: 20rpx;border: 1px solid #1edada;color: #1edada;text-align: center;line-height: 50rpx;}
	.tli{margin-bottom: 20rpx;}
	.tips{width: 600rpx;background-color: #FFFFFF;padding: 20rpx;border-radius: 20rpx;}
	.li .tag{transform: rotate(45deg);position: absolute;right: -20rpx;top: -40rpx;width: 100rpx;height: 100rpx;}
	.li .detail{width: 490rpx;height: 160rpx;}
	.li .img{width: 160rpx;height: 160rpx;border-radius: 10rpx;overflow: hidden;}
	.li{border-radius: 20rpx;background-color: beige;box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.42);height: 200rpx;position: relative;}
	
</style>